<template>
	<view>
		<view :class="['content', { show: show }]" @click="hide">
			<view class="bottom" @click.stop="donothing">
				<!-- <view class="cell-class">
					<view style="height:60px;width:60px;"></view>
					<view style="font-size: 17px;font-weight: 400;color:#333">密码验证</view>
					<view style="height:60px;width:60px;"></view>
				</view>
				<view :class="['flexCC',{'fail': failIf}]">
					<view :class="['circle', { blackC: password.length >= 1 }]"></view>
					<view :class="['circle', { blackC: password.length >= 2 }]"></view>
					<view :class="['circle', { blackC: password.length >= 3 }]"></view>
					<view :class="['circle', { blackC: password.length >= 4 }]"></view>
					<view :class="['circle', { blackC: password.length >= 5 }]"></view>
					<view :class="['circle', { blackC: password.length >= 6 }]"></view>
				</view> -->
				<input placeholder="请输入内容" class="your-input" v-model="password" @change="onchange" type="number" ></input>
				<view class="bottom-row">
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('1')">1</Button>
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('2')">2</Button>
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('3')">3</Button>
				</view>
				<view class="bottom-row">
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('4')">4</Button>
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('5')">5</Button>
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('6')">6</Button>
				</view>
				<view class="bottom-row">
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('7')">7</Button>
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('8')">8</Button>
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('9')">9</Button>
				</view>
				<view class="bottom-row">
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('clear')">清空</Button>
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('0')">0</Button>
					<Button :color="'#000000'" class="btn-class" @touchend.native="handleKey('backspace')">
						<view style="font-size: 80px;">删除</view>
					</Button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Button from './dt-button.vue';
	export default {
		name: 'keyBoard',
		components: {
			Button
		},
		props: {
			show: {
				type: Boolean,
				default: false,

			},
			failIf: {
				type: Boolean,
				default: false
			},
			detailstyle: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				password: '',
				placeholderColor: '#ffffff'
			};
		},
		mounted() {},
		methods: {
			handleKey(e) {
				if (Number(e) >= 0 && this.password.length <= 46) {
					this.password += e.toString();
					// if (this.password.length === 6) {
					this.$emit('getPassword', this.password);
					// }
				}
				if (e === 'clear') {
					this.clear();
				}
				if (e === 'backspace') {
					if (this.password === '') return;
					let arr = this.password.split('');
					arr.pop();
					this.password = arr.join('');
					this.$emit('backadd', this.password);
				}
			},
			hide() {
				this.$emit('hideKey', false);
			},
			donothing() {},
			clear() {
				this.password = '';
			}
		},
		watch: {
			'show'(newVal, oldVal) {
				if (!newVal) this.password = ''
			},
		}
	};
</script>

<style>
	.content {
		/* position: fixed; */
		/* z-index: 10000; */
		/* top: 0; */
		/* left: 0; */
		/* background-color: rgba(0, 0, 0, 0.5); */
		width: 80vw;
		/* height: 100vh; */
		opacity: 0;
		pointer-events: none;
		transition: all 0.25s linear;
	}

	.content.show {
		pointer-events: auto;
		opacity: 1;
		transition: all 0.25s linear;
	}

	.bottom {
		/* background-color: #fff; */
		/* position: fixed; */
		/* z-index: 12000; */
		/* bottom: 36vw; */
		/* left: 8vw; */

		width: 100%;
		height: 80vw;
		margin-left: 8vw;
		margin-top: 6vw;
		padding-bottom: 20px;
		transform: translateY(100%);
		transition: all 0.2s linear;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;

	}

	.show .bottom {
		transform: translateY(0%);
		transition: all 0.2s linear;
	}

	.btn-class {
		/* height: 200px;
		width: 33.33%; */
		height: 200px;
		width: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 80px;
		font-weight: 700;
		border-radius: 50%;
		border: 20rpx #faffe1 solid;
		margin-left: 8%;
		background-color: #fff;
	}

	.icon {
		width: 24px;
		height: 24px;
	}

	.circle {
		width: 12px;
		height: 12px;
		border: 1px solid #666;
		border-radius: 50%;
		margin: 0px 5px 20px;
	}

	.blackC {
		width: 12px;
		height: 12px;
		background-color: #666;
	}

	.flexCC {
		display: flex;
		align-content: center;
		justify-content: center;
	}

	.bottom-row {
		display: flex;
		margin-top: 6vw;
	}

	.cell-class {
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fail {
		animation: shake 600ms ease-in-out;
	}

	@keyframes shake {

		10%,
		90% {
			transform: translate3d(-1px, 0, 0);
		}

		20%,
		80% {
			transform: translate3d(+2px, 0, 0);
		}

		30%,
		70% {
			transform: translate3d(-3px, 0, 0);
		}

		40%,
		60% {
			transform: translate3d(+4px, 0, 0);
		}

		50% {
			transform: translate3d(-5px, 0, 0);
		}
	}

	.your-input {
		width: 80vw;
		height: 10vw;
		font-size: 120rpx;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 1vw;
		padding-left: 50rpx;
		border-bottom: 2rpx #fff solid;
	}

	.uni-input-placeholder {
	    position: absolute;
	    top: auto!important;
	    left: 0;
	    color: #fff;
	    overflow: hidden;
	    text-overflow: clip;
	    white-space: pre;
	    word-break: keep-all;
	    pointer-events: none;
	    line-height: inherit;
	}
</style>